<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder"  size="default" />
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-input clearable v-model="_value" :placeholder="placeholder" size="default" >
        <template #append v-if="enableScan">
          <el-button @click="scanCode">
            <!-- <icon name="el-icon-fullscreen"/> -->
            <el-icon><FullScreen /></el-icon>
          </el-button>
        </template>
      </el-input>
      <scan-code pcMode v-model="visible" @ok="scanOk"></scan-code>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field v-model="_value" clearable :placeholder="placeholder">
        <template #right-icon v-if="enableScan">
            <el-icon @click="scanCode"><FullScreen /></el-icon>
          <!-- <icon name="el-icon-fullscreen"></icon> -->
        </template>
      </field>
      <scan-code v-model="visible" @ok="scanOk"></scan-code>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script>
import { FullScreen } from '@element-plus/icons-vue'
import { Field } from 'vant'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import ScanCode from '/@/views/setting/workflow/common/ScanCode.vue'

export default {
    name: 'TextInput',
    mixins: [componentMinxins],
    components: {
        FullScreen,
        Field,
        ScanCode
    },
    props: {
        modelValue: {
            type: String,
            default: null,
        },
        placeholder: {
            type: String,
            default: '请输入内容',
        },
        enableScan: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['update:modelValue'],
}
</script>

<style>

</style>